package com.aqian.theme.color.happy.ui.screens.home

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.aqian.theme.color.happy.data.model.Theme
import com.aqian.theme.color.happy.ui.viewmodel.HomeViewModel

@Composable
fun HomeScreen(
    modifier: Modifier = Modifier,
    viewModel: HomeViewModel = viewModel()
) {
    val themes by viewModel.themes.collectAsState()

    LazyColumn(
        modifier = modifier.fillMaxSize(),
        contentPadding = PaddingValues(16.dp)
    ) {
        item {
            SearchBar()
            Spacer(modifier = Modifier.height(16.dp))
        }

        item {
            BannerSection()
            Spacer(modifier = Modifier.height(16.dp))
        }

        item {
            CategorySection()
            Spacer(modifier = Modifier.height(16.dp))
        }

        item {
            PopularThemes(themes = themes)
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SearchBar(
    modifier: Modifier = Modifier
) {
    TextField(
        value = "",
        onValueChange = {},
        modifier = modifier.fillMaxWidth(),
        placeholder = { Text("搜索主题、壁纸、图标包") },
        leadingIcon = {
            Icon(
                imageVector = Icons.Default.Search,
                contentDescription = "搜索"
            )
        },
        colors = TextFieldDefaults.textFieldColors(
            containerColor = MaterialTheme.colorScheme.surface
        )
    )
}

@Composable
fun BannerSection(
    modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier.fillMaxWidth(),
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp),
            contentAlignment = Alignment.Center
        ) {
            Text("Banner")
        }
    }
}

@Composable
fun CategorySection(
    modifier: Modifier = Modifier
) {
    LazyRow(
        modifier = modifier,
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(categories) { category ->
            CategoryItem(category = category)
        }
    }
}

@Composable
fun CategoryItem(
    category: String,
    modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier
    ) {
        Box(
            modifier = Modifier
                .width(80.dp)
                .height(80.dp),
            contentAlignment = Alignment.Center
        ) {
            Text(category)
        }
    }
}

@Composable
fun PopularThemes(
    themes: List<Theme>,
    modifier: Modifier = Modifier
) {
    Column(modifier = modifier) {
        Text(
            text = "热门主题",
            style = MaterialTheme.typography.titleMedium
        )
        Spacer(modifier = Modifier.height(8.dp))
        LazyRow(
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(themes) { theme ->
                ThemeCard(theme = theme)
            }
        }
    }
}

@Composable
fun ThemeCard(
    theme: Theme,
    modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier.width(160.dp)
    ) {
        Column {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(160.dp),
                contentAlignment = Alignment.Center
            ) {
                Text("Preview")
            }
            Column(
                modifier = Modifier.padding(8.dp)
            ) {
                Text(
                    text = theme.name,
                    style = MaterialTheme.typography.titleSmall
                )
                Text(
                    text = theme.author,
                    style = MaterialTheme.typography.bodySmall
                )
            }
        }
    }
}

// Sample data
private val categories = listOf(
    "壁纸", "图标包", "系统主题", "字体", "铃声"
)
